<template>
  <div class="userlist">
    <el-menu
      :unique-opened="true"
      class="el-menu-vertical-demo"
      @select="goPagesA"
    >
      <el-submenu index="/set">
        <template slot="title">
          <img class="userlist-img" :src="userInfo.avatar?userInfo.imgHost+userInfo.avatar:require('@/static/UserAvatar.png')" alt="" />
          <span class="userlist-name"
            >{{ userInfo.nickname
            }}<a href="javascript:;" @click.stop="goPages('/set')"></a
          ></span>
        </template>
        <el-menu-item index="/presonl"
          >个人中心<a href="javascript:;" @click.stop="goPages('/presonl')"></a
        ></el-menu-item>
        <el-menu-item index="/set/messages"
          >我的私信<a
            href="javascript:;"
            @click.stop="goPages('/set/messages')"
          ></a
        ></el-menu-item>
        <el-menu-item index="/set/notifications"
          >系统通知<a
            href="javascript:;"
            @click.stop="goPages('/set/notifications')"
          ></a
        ></el-menu-item>
        <el-menu-item index="/set"
          >账号设置<a href="javascript:;" @click.stop="goPages('/set')"></a
        ></el-menu-item>
        <el-menu-item index="/"
          >退出登录<a href="javascript:;" @click.stop="handleLogout"></a
        ></el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex";
export default {
  props: {
    navbarList: Array,
  },
  data() {
    return {
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  created() {
  },
  methods: {
    ...mapMutations(["handleClose","setUserInfo"]),
    async goPages(path) {
      // console.log('pages',path);
      this.handleClose();
      this.$router.push(path);
    },
    async goPagesA(key, keyPath) {
      // console.log('paagesA',key, keyPath);
      if (key == "/") {
        this.handleLogout();
      } else {
        this.handleClose();
        this.$router.push(key);
      }
    },
    //退出登录
    handleLogout() {
      this.setUserInfo({value:{},app:this})
      this.handleClose();
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less">
.userlist {
  padding: 20px;
  .el-menu {
    background-color: #0088cc !important;
    border-right: 0 !important;
    div {
      color: #fff;
      padding: 0 !important;
      font-size: 14px !important;
    }
    li {
      color: #000;
      padding-left: 0 !important;
      font-size: 14px !important;
      > span {
        color: #fff;
        padding-left: 10px !important;
      }
    }
    li.active {
      background-color: #1a94d1;
    }
    .el-submenu {
      .el-submenu__title {
        padding-left: 10px !important;
        // border-bottom: 1px solid #0075b0;
        box-sizing: border-box;
        &::after {
          content: "";
          border-left: 1px solid #0075b0;
          box-sizing: border-box;
          position: absolute;
          right: 55px;
          top: 10px;
          height: 36px;
        }
        i {
          font-size: 18px;
          color: #fff;
        }
        .el-submenu__icon-arrow {
          margin-top: -8px;
        }
        img {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      ul {
        .el-submenu__title {
          padding-left: 20px !important;
          border-bottom: 1px solid #0075b0;
          box-sizing: border-box;
        }
        li.el-menu-item {
          padding-left: 20px !important;
          border-bottom: 1px solid #0075b0;
          box-sizing: border-box;
        }
      }
      .is-opened {
        .el-menu {
          background-color: #0081c2 !important;
          .is-opened {
            .el-menu {
              background-color: #007ab8 !important;
            }
          }
        }
      }
      .el-menu-item {
        height: 38px !important;
        line-height: 38px !important;
      }
    }
    .el-submenu.active {
      background-color: #1a94d1;
    }
    .el-submenu.is-opened {
      > ul {
        > li {
          padding-left: 30px !important;
        }
      }
    }
    .el-submenu__title:hover {
      background-color: #1a94d1 !important;
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #1a94d1 !important;
    }
    .el-menu-item.is-active {
      color: #fff;
    }
    a {
      position: absolute;
      left: 0;
      display: inline-block;
      width: 89%;
      height: 100%;
    }
  }
  > .el-menu > div > .el-menu-item {
    border-bottom: 1px solid #0075b0;
    box-sizing: border-box;
  }
}
</style>